<template>
	<div class="hotzonestyle">
		<h2>{{ datas.text }}</h2>
		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<div class="decorate-card">
					<el-form label-width="100px">
						<el-form-item label="背图片">
							<div class="sd-flex">
								<div class="choice-image choice-image-delete" @click="FileChoiceRef.openFileChoiceDialog()">
									<el-image v-if="datas.src != ''" :src="STATIC_URL + datas.src" fit="cover" />
									<el-icon v-else>
										<ele-Plus />
									</el-icon>

									<div class="delete-content" @click.stop="datas.src = ''" v-if="datas.src != ''">
										<SvgIcon name="ele-DeleteFilled"></SvgIcon>
									</div>
								</div>
							</div>

							<!-- <div @click="FileChoiceRef.openFileChoiceDialog()" class="image cursor-pointer">
								<el-image style="width: 50px; height: 50px" :src="STATIC_URL + datas.src" v-if="datas.src != ''" />
								<SvgIcon v-else name="ele-Plus"></SvgIcon>
							</div> -->
						</el-form-item>
					</el-form>
					<div style="margin-top: 10px" v-if="datas.src != ''">
						<el-button :icon="Plus" @click="openHotzone">添加热区</el-button>
						<el-button :icon="Delete" @click="deleteImg">删除图片</el-button>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="样式">
				<DataStyle :datas="datas.dataStyle"></DataStyle>
			</el-tab-pane>
			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>
		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>
		<HotzoneDialog ref="HotzoneDialogRef" @saveHotzone="saveHotzone"></HotzoneDialog>
	</div>
</template>

<script lang="ts" setup name="hotzonestyle">
import { defineAsyncComponent, ref } from 'vue';
import { STATIC_URL } from '/@/utils/config';
import { Plus, Delete } from '@element-plus/icons-vue';
const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const HotzoneDialog = defineAsyncComponent(() => import('./HotzoneDialog.vue'));

const props = defineProps({
	datas: {},
});

const FileChoiceRef = ref();

const HotzoneDialogRef = ref();
const choiceFile = (res: any) => {
	// 封面
	props.datas.src = res[0].visitRelativePath;
};

const openHotzone = () => {
	HotzoneDialogRef.value.openDialog(props.datas.src, props.datas.list);
};
const saveHotzone = (hotzones: any) => {
	console.log('保存热区数据...: ', hotzones);
	props.datas.list = hotzones;
};

const deleteImg = () => {
	props.datas.src = '';
};
</script>

<style lang="scss" scoped>
.image {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	border: 1px dashed var(--el-border-color-darker);
}
.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}

	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}
</style>
